<template>
  <div id="comPosMana">
    <el-container style="height: 100vh; border: 1px">
      <el-header>
        <el-row>
          <el-col :span="2"
            ><div class="grid-content bg-purple">聘途</div></el-col
          >
          <el-col :span="2" :offset="20"
            ><div class="grid-content bg-purple">
              <el-button
                style="font-size: large; color: black"
                type="text"
                @click="Loginout"
                >退出登录</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <Sidebar></Sidebar>
        </el-aside>
        <el-main>
          <!-- 主体内容 -->
          <el-row>
            <!-- 发布岗位 -->
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addPositionDia"
                  >发布岗位</el-button
                >
              </div></el-col
            >
            <!-- 搜素输入框 -->
            <el-col :span="3" :offset="12"
              ><div class="grid-content bg-purple">
                <el-input
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="searchvalue"
                >
                </el-input></div
            ></el-col>
            <!-- 搜素按钮 -->
            <el-col :span="1"
              ><div class="grid-content bg-purple">
                <el-button type="primary" @click="search">搜素</el-button>
              </div></el-col
            >
            <!-- 筛选 -->
            <el-col :span="2" :offset="1"
              ><div class="grid-content bg-purple-light">
                <el-select v-model="valueSelect" placeholder="筛选">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></el-col>
          </el-row>
          <!-- 展示岗位 -->
          <el-table :data="tableData" style="margin-top: 20px" :span-method="spanMethod">
            <!-- 岗位元素 -->
            <el-table-column width="1250">
              <template slot-scope="scope">
                <div v-show="shouldShowRow(scope.row)">
                  <el-descriptions style="margin-bottom: 0; font-size: large">
                    <el-descriptions-item label="职位名称">{{
                      scope.row.pname
                    }}</el-descriptions-item>
                    <el-descriptions-item label="地点">{{
                      scope.row.paddress
                    }}</el-descriptions-item>
                    <el-descriptions-item label="薪资">{{
                      scope.row.salary
                    }}</el-descriptions-item>
                    <el-descriptions-item label="招聘人数">{{
                      scope.row.enumber
                    }}</el-descriptions-item>
                    <el-descriptions-item label="录用人数">{{
                      scope.row.anumber
                    }}</el-descriptions-item>
                    <el-descriptions-item label="申请人数">{{
                      scope.row.applynum
                    }}</el-descriptions-item>
                    <el-descriptions-item label="热度">
                      <el-tag size="small">{{ scope.row.hot }}</el-tag>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column width="300">
              <template slot-scope="scope">
                <div v-show="shouldShowRow(scope.row)">
                  <!-- 招聘员工 -->
                  <el-button
                    size="small"
                    type="primary"
                    @click="hireEmployee(scope.row)"
                    >招聘员工</el-button
                  >
                  <!-- 更改岗位信息（打开窗口的按钮） -->
                  <el-button
                    size="small"
                    type="warning"
                    @click="editItem(scope.row)"
                    >更改</el-button
                  >
                  <!-- 删除 -->
                  <el-button
                    size="small"
                    type="danger"
                    @click="deleteItem(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加岗位or更新岗位 -->
          <el-dialog :title="diatitle" :visible.sync="dialogTableVisiblePos">
            <el-form :model="PosForm" label-width="80px" style="width: 600px">
              <!-- 岗位名称 -->
              <el-form-item label="岗位名称" style="font-weight: bolder">
                <el-input
                  v-model="PosForm.pname"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <!-- 工作城市 -->
              <el-form-item label="工作城市" style="font-weight: bolder">
                <el-input
                  v-model="PosForm.paddress"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <!-- 预期薪资 -->
              <el-form-item label="预期薪资" style="font-weight: bolder">
                <el-input
                  v-model="PosForm.salary"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <!-- 招聘人数 -->
              <el-form-item label="招聘人数" style="font-weight: bolder">
                <el-input
                  v-model="PosForm.enumber"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <!-- 职位描述 -->
              <el-form-item label="职位描述" style="font-weight: bolder">
                <textarea
                  style="font-size: larger; width: 500px; height: 200px"
                  v-model="PosForm.desc"
                ></textarea>
              </el-form-item>
              <!-- 提交 -->
              <el-form-item v-if="choiceAddorchange">
                <el-button type="primary" @click="addPostion">提交</el-button>
              </el-form-item>
              <!-- 更改 -->
              <el-form-item v-else>
                <el-button type="primary" @click="changePostion"
                  >更改</el-button
                >
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
<script>
import axios from "axios";
import Sidebar from "@/components/CompanySidebar.vue";
import { EventBus } from '@/util/event-bus.js';
export default {
  components: {
    Sidebar,
  },
  created() {
    this.mou();
  },
  data() {
    return {
      // 重点2
      tableData: [],
      CompanyUserData: JSON.parse(sessionStorage.getItem("CompanyUser")),
      dialogTableVisiblePos: false, //添加岗位
      choiceAddorchange: true,
      changePid: "", //更改时后端需要pid
      diatitle: "",
      searchvalue: "", //双向绑定搜索输入框
      PosForm: {
        pname: "",
        paddress: "",
        salary: "",
        enumber: "",
        desc: "",
      },
      //下面暂时无用
      options: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "已招满",
        },
        {
          value: "选项3",
          label: "未招满",
        },
      ],
      valueSelect: "选项1",
    };
  },
  methods: {
    closeWebSocket() {
      EventBus.$emit('close-websocket-company');
    },
    //空白行处理
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.shouldShowRow(row)) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
      return {
        rowspan: 1,
        colspan: 1,
      };
    },
    mou() {
      let data1 = new FormData();
      data1.append("cusername", this.CompanyUserData.cusername);
      axios
        .post("http://localhost:8080/hqdx/position/ShowPosition", data1)
        .then((response) => {
          this.tableData = response.data.data.items;
        })
        .catch((error) => console.error("Error loading job data:", error));
    },
    deleteItem(row) {
      const confirmDelete = confirm("确定要删除这个岗位吗?");
      if (confirmDelete) {
        let data = new FormData();
        data.append("pid", row.pid);
        axios
          .post(`http://localhost:8080/hqdx/position/DeletePosition`, data)
          .then(() => {
            alert("职位已从页面中删除");
            this.mou();
          })
          .catch((error) => {
            console.error("Error deleting job:", error);
            alert("删除职位时出错");
            this.mou();
          });
      }
    },
    //清空弹窗
    DiaEmpty() {
      this.PosForm.pname = "";
      this.PosForm.paddress = "";
      this.PosForm.salary = "";
      this.PosForm.enumber = "";
      this.PosForm.desc = "";
    },
    //添加窗口
    addPositionDia() {
      this.DiaEmpty();
      this.diatitle = "新岗位招聘";
      this.choiceAddorchange = true;
      this.dialogTableVisiblePos = true;
    },
    //添加
    addPostion() {
      let data2 = new FormData();
      data2.append("cid", this.CompanyUserData.cid);
      data2.append("pname", this.PosForm.pname);
      data2.append("paddress", this.PosForm.paddress);
      data2.append("salary", this.PosForm.salary);
      data2.append("enumber", this.PosForm.enumber);
      data2.append("cv", this.PosForm.desc);
      axios
        .post("http://localhost:8080/hqdx/position/InsertPosition", data2) // 向服务器发送POST请求
        .then((response) => {
          if (response.data.message == "此岗位已存在") {
            alert("此岗位已存在");
          } else {
            alert("职位添加成功"); // 提交成功后的提示
            this.mou();
            this.dialogTableVisiblePos = false;
            this.DiaEmpty();
          }
        })
        .catch((error) => {
          alert("职位添加失败"); // 提交失败后的提示
          console.error("Error adding job:", error); // 处理错误
        });
    },
    //更改
    changePostion() {
      let data3 = new FormData();
      data3.append("pid", this.changePid);
      data3.append("pname", this.PosForm.pname);
      data3.append("salary", this.PosForm.salary);
      data3.append("paddress", this.PosForm.paddress);
      data3.append("enumber", this.PosForm.enumber);
      data3.append("cv", this.PosForm.desc);
      axios
        .post("http://localhost:8080/hqdx/position/UpdatePosition", data3) // 向服务器发送POST请求
        .then((response) => {
          if (response.data.message === "岗位名字不可修改") {
            alert(response.data.message);
          } else {
            alert("职位更新成功"); // 提交成功后的提示
            this.mou();
            this.dialogTableVisiblePos = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //更改窗口
    editItem(row) {
      // this.DiaEmpty();
      this.diachangeinit(row);
      this.diatitle = "更改岗位信息";
      this.choiceAddorchange = false;
      this.dialogTableVisiblePos = true;
    },
    //更改窗口生成前渲染
    diachangeinit(row) {
      //存储pid
      this.changePid = row.pid;
      let data = new FormData();
      data.append("pid", row.pid);
      axios
        .post("http://localhost:8080/hqdx/position/findpositionBypid", data)
        .then((response) => {
          let items = response.data.data.items;
          this.PosForm.pname = items.pname;
          this.PosForm.paddress = items.paddress;
          this.PosForm.salary = items.salary;
          this.PosForm.enumber = items.enumber;
          this.PosForm.salary = items.salary;
          this.fetchFileContent(items.pinfo);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取文本
    fetchFileContent(pinfo) {
      // 使用 Axios 从后端获取文件内容
      let data = new FormData();
      //改动2
      data.append("pinfo", pinfo);
      //改动3
      axios
        .post(
          "http://localhost:8080/hqdx/company/showPositionDescription",
          data
        )
        .then((response) => {
          this.PosForm.desc = response.data.data.items; // 更新Vue实例的数据
        })
        .catch((error) => {
          console.error("Error fetching file content:", error);
        });
    },
    //招聘人员，路由跳转
    hireEmployee(row) {
      this.$router.push({ name: "company-recruit", params: { ElemPos: row } });
    },
    search() {
      if (this.searchvalue === "") {
        //输出全部
        this.mou();
      } else {
        let data = new FormData();
        data.append("cid", this.CompanyUserData.cid);
        data.append("value", this.searchvalue);
        axios
          .post("http://localhost:8080/hqdx/position/searchPosition", data)
          .then((response) => {
            this.tableData = response.data.data.items;
          })
          .catch((error) => {
            console.error("Error fetching file content:", error);
          });
      }
    },
    shouldShowRow(row){
      if(this.valueSelect === "选项1") return true;
      if(this.valueSelect === "选项2"){
        if(row.enumber === row.anumber) return true;
        else return false;
      }
      if(this.valueSelect === "选项3"){
        if(row.enumber === row.anumber) return false;
        else return true;
      }
    },
    Loginout(){
      this.closeWebSocket();
      let data = new FormData();
      data.append("cusername", this.CompanyUserData.cusername);
      axios
        .post("http://localhost:8080/hqdx/company/loginout", data)
        .then((response) => {})
        .catch((error) => {
          console.log(error);
        });
      this.$router.push('/login');
      sessionStorage.setItem('LoginComState', JSON.stringify(false));//退出登录，状态记录
    }
  },
};
</script>
    <style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background: linear-gradient(to right, #ffffff, #e0f7fa);
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
}

/* 不清楚作用 */
body > .el-container {
  margin-bottom: 40px;
}
</style>